/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Button, CCell, Cell, InputDatalist, InputIdProvider, Table, TableBody, TableHead, TableRow, Text,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, SelectInput, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {getFormatDate, objNestSet} from "../../../common/tool";
import {FootMenRow} from "../../contain/rarelyVary";
import {useOmnipotentPrefCs, useOmnipotentPrefTitle} from "../../hook/useOmnipotentPref";
import {useContext} from "react";
import UserContext from "../../../routing/UserContext";

const items工作内容 = [
    ['型式试', [], '生产许可资质和型式试验文件', 'C' ],
    ['设计文', [], '设计文件', 'C' ],
    ['工艺文', [], '工艺文件', 'C' ],
    ['质计划', [], '质量计划', 'C' ],
    ['料质证', [{t:'材料', s: 4}, ], '材料质量证明书', 'C'],
    ['料追溯', [{} ], '材料标志与可追溯性', 'B' ],
    ['料验收', [{} ], '材料验收', 'C' ],
    ['料复验', [{} ], '材料复验', 'C' ],
    ['造工艺', [], '制造工艺',  ],
    ['焊接人', [{t:'焊接', s: 2}, ], '焊接作业人员', 'B'],
    ['焊工艺', [{}], '焊接工艺', 'B' ],
    ['无损人', [{t:'无损检测', s: 3}, ], '人员资格', 'B'],
    ['无损报', [{}], '无损检测报告', 'C' ],
    ['射检片', [{}], '射线检测底片或者数字图像抽查', 'B' ],
    ['测温仪', [{t:'热处理', s: 2}, ], '热处理设备用测温记录仪表', 'B'],
    ['热处理', [{}], '热处理记录、报告', 'C' ],
    ['外观尺', [{t:'外观与几何尺寸', s: 2}, ], '抽查外观与几何尺寸', 'B'],
    ['外审记', [{}], '审查检验记录', 'C' ],
    ['性能验', [], '性能试验', 'C' ],
    ['耐压验', [], '耐压试验', 'A' ],
    ['泄漏试', [{t:'泄漏试验', s: 2}, ], '试验报告', 'C' ],
    ['泄试条', [{}], '试验条件、试验设备', 'B'],
    ['涂敷', [], '涂敷质量','B'],
    ['产标志', [{t:'产品出厂检验', s: 2}, ], '产品标志', 'B'],
    ['出厂文', [{}], '出厂文件', 'C' ],
];

export const itemA工作内容: string[] = [ ];
items工作内容.forEach(([name, title, initIsp], i: number) => {
    itemA工作内容.push(name as string);
});
const 检验结果选=['符合','不符合','无此项'];
    //'ZWX','WX','ZX','WX'
const 监检方法选=['资料审查','资料审查、实物检查','实物检查','现场监督',];
const 类别选=["B","C"];

export const JobResponsibili =
    React.forwardRef((
        {children, show, alone = true, redId, nestMd, label, refWidth}: InternalItemProps, ref
    ) => {
        const {user} = useContext(UserContext);
        const [getInpFilter] = useMeasureInpFilter(null, itemA工作内容,);
        const {inp, setInp} = useItemInputControl({ref});
        const titNode=useOmnipotentPrefTitle({config:items工作内容, });
        return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                    nestMd={nestMd} alone={alone} label={label!}>
            <Text>{label}：</Text>
            {items工作内容.map(([name, _1, _2, unit]: any, i: number) => {
                //【特殊部分】 3个行的单位可以编辑的。配置也相应特殊指定u：null；的配置模式。
                return (<React.Fragment key={i}>
                    <div css={{display: 'flex',flexWrap:'wrap',alignItems:'center'}}>
                        {titNode[i]} 类别{unit}；
                        {!unit && <>选择类别<SelectInput value={inp?.[name]?.u || ''} list={类别选} nMinW
                                               style={{display: 'inline-flex', width: '5rem'}}
                                               onChange={e => objNestSet(name, 'u', e.currentTarget.value || undefined, inp, setInp)}/>
                        </>}
                        工作见证
                        <InputIdProvider>
                            <InputDatalist value={(inp?.[name]?.c) || ''} datalist={监检方法选}
                                           style={{display: 'inline-flex', width: '13rem'}}
                                           onListChange={v => objNestSet(name,'c', v||undefined,inp,setInp) } />
                        </InputIdProvider>
                        &nbsp;监检结果
                        <InputIdProvider>
                            <InputDatalist value={(inp?.[name]?.r) || ''} datalist={检验结果选}
                                           style={{display: 'inline-flex', width: '9rem'}}
                                           onListChange={v => objNestSet(name,'r', v||undefined,inp,setInp) } />
                        </InputIdProvider>
                        &nbsp;监检员：{inp?.[name]?.sgm?.name || ''}。<br/>
                        {inp?.[name]?.sgm?.username === user?.username ?
                            <Button intent="primary"
                                    onPress={async () => {
                                        const oneobj={...inp?.[name], 'sgm':undefined,'d':undefined };
                                        const newo={...inp, [name]: oneobj };
                                        setInp(newo);
                                    }}
                            >去除签名</Button>
                            :
                            <Button intent="primary"
                                    onPress={async () => {
                                        const me = {username: user?.username, name: user?.person?.name};
                                        const oneobj={...inp?.[name], 'sgm': me, 'd': getFormatDate(new Date()) };
                                        const newo={...inp, [name]: oneobj };
                                        setInp(newo);
                                    }}
                            >签名</Button>
                        }
                    </div>
                </React.Fragment>);
            })}
        </InspectRecordLayout>;
});

const tailRender = (orc: any, name: string) => <>
    <CCell>{orc?.[name]?.r ?? '／'}</CCell>
    <CCell>{orc?.[name]?.c ?? '／'}</CCell>
    <CCell>{orc?.[name]?.sgm?.name ?? '／'}</CCell>
    <CCell>{orc?.[name]?.d ?? '／'}</CCell>
</>;
export const JobResponsibiliVw = ({orc, rep}: { orc: any, rep: any }
) => {
    const newConfig=React.useMemo(()=>{
        let nine=[ ...items工作内容[8] ];
        nine[3]=orc?.造工艺?.u;
        let cfg=[...items工作内容.slice(0,8), nine, ...items工作内容.slice(9)];
        return cfg;
    },[orc?.造工艺?.u]);
    const [renderP1] = useOmnipotentPrefCs({orc, config: newConfig,
                    tag:'JobResponsibili', tailRender, pcols: 1, noNo: false, unitCel: true,});
    return <>
        <div css={{"@media print": {paddingBottom: '3rem', pageBreakInside: 'avoid'}}}>
        </div>
        <Table fixed={ ["4%", "8%", "%", "4%", "9%","20%","12%", "13%"] }
                css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3rem'}}} tight miniw={800}>
            <TableHead>
                <TableRow>
                    <CCell><Text css={{fontSize: '0.75rem'}}>序号</Text></CCell><CCell
                    colSpan={2}>监检项目</CCell><CCell><Text css={{fontSize: '0.75rem'}}>监检类别</Text></CCell>
                    <CCell>监检结果</CCell><CCell>工作见证</CCell><CCell>监检员</CCell><CCell>确认日期</CCell>
                </TableRow>
            </TableHead>
            <TableBody>
                <RepLink rep={rep} tag={'JobResponsibili'}>
                    {renderP1}
                </RepLink>
                <RepLink rep={rep} tag={'Conclusion'}>
                    <TableRow id='Conclusion'>
                        <Cell colSpan={8}>
                            <div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'
                            }}>记事（用于记录监检过程中实施现场检查和抽查实物的结果记录、质量保证体系发现的问题等）：<br/>
                                {orc.记事 ?? '／'}</div>
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <Cell colSpan={8}>
                            <div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'
                            }}>其他说明栏：（记述不符合的具体情况和情节以及制造单位处理情况等）<br/>
                                {orc.结论备注 || '／'}</div>
                        </Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
            <FootMenRow orc={orc} rep={rep} span={8} cap={'监检'} scap={'校核'}/>
        </Table>
    </>;
};
